<template>
	<view class="tabBarCustom">
		<view class="tabBar">
			<view class="tabbar_view" v-for="item in tabBarList" :key="item.id" @click="handleSwitch(item)"  :style="tabbarIndex == item.id ?`color:var(--subjectColor)`:`color:var(--subtopicTextColor)`">
				<text :class="tabbarIndex == item.id ?`iconfont ${item.selectedIconPath}`:`iconfont ${item.iconPath}`"></text>
				<view class="">
					{{item.id == 0?$t('rental'):item.id == 1?$t('asset'):item.id == 2?$t('message'):item.id == 3?$t('my'):''}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: ['tabbarIndex'],
		data() {
			return {
				tabBarList: [{
						id: 0,
						pagePath: "/pages/home/home",
						text: this.$t('rental'),
						iconPath: "icon-a-leixinghometianchongno",
						selectedIconPath: "icon-a-leixinghometianchongyes"
					},
					{
						id: 1,
						pagePath: "/pages/property/property",
						text: this.$t('asset'),
						iconPath: "icon-zichanguanli",
						selectedIconPath: "icon-zichanguanli"
					},
					{
						id: 2,
						pagePath: "/pages/message/message",
						text: this.$t('message'),
						iconPath: "icon-xiaoxi",
						selectedIconPath: "icon-xiaoxi"
					},
					{
						id: 3,
						pagePath: "/pages/me/me",
						text: this.$t('my'),
						iconPath: "icon-a-leixingmetianchongno",
						selectedIconPath: "icon-a-leixingmetianchongyes"
					}
				]
			}
		},
		methods: {
			handleSwitch(item){
				let uncounted = uni.getStorageSync('uncounted')
				if(uncounted) return false
				uni.$emit('changeSwitch')
				uni.switchTab({
					url:item.pagePath
				})
			},
		},

	}
</script>

<style scoped lang="scss">

	.tabBarCustom {
		
		width: 100%;
		height: 112rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: var(--moduleColor);
		padding-bottom: constant(safe-area-inset-bottom); 
		padding-bottom: env(safe-area-inset-bottom); 
		

		
		
		.tabBar {
			width: 100%;
			height: 112rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			z-index: 10;
			box-sizing: border-box;
			border-top: 1px solid var(--borderColor);
			

			.tabbar_view {
				width: 250rpx;
				height: 80rpx;
				text-align: center;
				
				view{
					font-size: 24rpx;
				}
			}
		}
	}
</style>